<template>
  <div class="school_infs">
    <Col span="7">
      <Card :style="{ height: conHeight + 'px' }">
        <p slot="title">
          <Icon type="navicon-round"></Icon>
          菜单列表
        </p>
        <div slot="extra">
          <Button type="info" @click="addLevelOne" size="small">新增一级菜单</Button>
          <Button type="info" @click="addFn" size="small">新增子节点</Button>
          <Button type="error" @click="delFn" size="small">删除</Button>
        </div>
       <!-- <div class="db_inline fr">
          <RadioGroup v-model="scope" @on-change="queryTreeData">
            <Radio label="p">PC</Radio>
            <Radio label="w">微信</Radio>
          </RadioGroup>
        </div>-->
        <div class="menu_list" style="overflow: auto;" :style="{ height: conHeight - 68 + 'px' }">
          <Tree ref="menuTree" :data="menuTreeData" @on-select-change="handlerSelectMenu"/>
        </div>
      </Card>
    </Col>
    <Col span="17">
      <Card :style="{ height: conHeight + 'px' }">
        <p slot="title">
          <Icon type="navicon-round"></Icon>
          菜单详情
        </p>
        <Form ref="formRef" :model="form" :label-width="150" label-position="right" :rules="rules" >
          <FormItem label="菜单名" prop="title">
            <Input v-model="form.title" style="width:60%"/>
          </FormItem>
          <FormItem label="父节点ID" prop="parentId" v-show="false">
            <Input v-model="form.parentId" disabled style="width:60%"/>
          </FormItem>
          <FormItem label="请求路径" prop="path">
            <Input v-model="form.path" style="width:60%"/>
          </FormItem>
          <FormItem label="图标"  prop="icon" v-if="form.level!==3">
            <Input v-model="form.icon" placeholder="图标名称即可" style="width:60%"/>
          </FormItem>
          <FormItem label="权限" prop="permission">
            <Input v-model="form.permission" style="width:60%"/>
          </FormItem>
          <FormItem label="类型"  prop="type">
            <RadioGroup v-model="form.type">
              <Radio label="menu">菜单</Radio>
              <Radio label="fcn">功能</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="级别" prop="level" class="db_inline">
            <InputNumber v-model="form.level" :min="0" :max="3" style="width:80px"/>
            (数字越小,越靠前)
          </FormItem>
          <FormItem label="排序" prop="level" class="db_inline">
            <InputNumber v-model="form.ord" :min="1" :max="20" style="width:80px"/>
            (数字越小,越靠前)
          </FormItem>
        </Form>
        <Button style="margin: 20px 0 0 200px;" type="primary" @click="submitFn" :loading="submitting">保存/编辑</Button>
      </Card>
    </Col>
    <Modal v-model="delModal" title="删除" v-on:on-ok="deleteOk">
      您确定要删除该菜单?
    </Modal>
  </div>
</template>

<script>
  import API from "@/api/api";

  export default {
    data() {
      return {
        delModal: false,
        delId: "",
        menuTreeData: [],
        conHeight: 0,
        childrenHeight: 0,
        submitting: false,
        scope:'p',
        form: {
          id: "",
          parentId: "",
          title: "",
          path: "",
          icon: "",
          level: 2,
          ord: 1,
          type: "menu",
          permission: "bean:",
        },
        rules: {}
      }
    },
    methods: {

      queryTreeData() {
        API.fetchMenuSys({scope:this.scope}).then(
          res => {
            this.menuTreeData = res.data;
          },
          error => {
            this.$Notice.error({
              title: '提示',
              desc: error.msg
            });
          }
        );
      },
      addLevelOne() {
        let data = {
          parentId: "0",
          title: "未命名",
          scope:this.scope,
          path: "/",
          ord: 50,
          type: 'menu',
          level: 1,
        };
        API.createMenu(data).then(
          res => {
            this.form=res.data;
            this.queryTreeData();
          })
      },
      addFn() {
        let data = {
          title: "子节点",
          scope:this.scope,
          path: "/",
          icon: "icon-next.png",
          type: 'menu',
          ord: 10,
        };
        let selectMenu = this.$refs.menuTree.getSelectedNodes();
        if (selectMenu.length > 0) {
          let menu = selectMenu[0];
          data.parentId = menu.id;
          data.level = (parseInt(menu.level) + 1) + "";
        } else {
          data.parentId = "0";
          data.level = "0";
        }
        API.createMenu(data).then(
          res => {
            this.form=res.data;
            this.queryTreeData();
          },
          error => {
            this.$Notice.error({
              title: '提示',
              desc: error.msg
            });
          }
        );
      },
      delFn() {
        let selectMenu = this.$refs.menuTree.getSelectedNodes();
        if (selectMenu.length > 0) {
          let menu = selectMenu[0];
          this.delModal = true;
          this.delId = menu.id;
        } else {
          this.$Notice.info({
            title: '提示',
            desc: "请先选择一个菜单"
          });
        }
      },
      deleteOk() {
        API.delMenu({
          id: this.delId
        }).then(
          res => {
            this.$refs.formRef.resetFields();
            this.queryTreeData();
            this.delModal = false;
          },
          error => {
            this.$Notice.error({
              title: '提示',
              desc: error.msg
            });
          }
        );
      },
      handlerSelectMenu(nodes) {
        if (nodes.length > 0) {
          let node = nodes[0];
          this.form.id = node.id;
          this.form.parentId = node.parentId;
          this.form.title = node.title;
          this.form.path = node.path;
          this.form.type = node.type;
          this.form.permission = node.permission;
          let icon = node.icon;
          this.form.icon = icon.substring(icon.lastIndexOf("/") + 1, icon.length);
          this.form.level = parseInt(node.level);
          this.form.ord = parseInt(node.ord);
        } else {
          this.$refs.formRef.resetFields();
        }
      },
      submitFn() {
        let id = this.form.id;
        if (id === "") {
          return;
        }
        let data = {
          id: this.form.id,
          parentId: this.form.parentId,
          title: this.form.title,
          path: this.form.path,
          permission: this.form.permission,
          icon: "../static/img/" + this.form.icon,
          level: this.form.level,
          ord: this.form.ord,
          type: this.form.type,
        };
        API.updateMenu(data).then(
          res => {
            this.$refs.formRef.resetFields();
            this.queryTreeData();
          },
          error => {
            this.$Notice.error({
              title: '提示',
              desc: error.msg
            });
          }
        );
      },
      setHeight() {
        let mHeight = $(window).outerHeight();
        let hHeight = $('.ivu-card-head').outerHeight();
        let fHeight = $('#footer').outerHeight();
        let cHeight = mHeight - hHeight - fHeight;
        this.conHeight = cHeight - 15;
        this.childrenHeight = cHeight - 100;
      }
    }
    ,
    mounted() {
      this.setHeight();
      this.queryTreeData();
    }
  }
</script>

<style scoped>

</style>
